<template>
  <div class="Home">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="Home-List-Box">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          class="Home-List"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in swipe" :key="index">
              <img v-lazy="image.SwipeImg" />
            </van-swipe-item>
          </van-swipe>
          <van-grid :border="false" :column-num="5">
            <van-grid-item v-for="(itme,index) in ActiveArea" :key="index">
              <van-image :src="itme.img" />
              <div class="ActiveAreaTitle">{{itme.text}}</div>
            </van-grid-item>
          </van-grid>
          <!-- AllProducts全部商品 -->
          <div class="AllProducts_Box">
            <div class="AllProducts_Title">全部商品</div>

            <ul class="AllProducts_Content">
              <li class="AllProducts_Content_Llst" v-for="(itme,index) in AllData" :key="index">
                <van-image
                  class="AllProductsImg"
                  width="3.7rem"
                  height="4rem"
                  lazy-load
                  :src="itme.img"
                />
                <div class="AllProducts_Content_Llst_Title">
                  <span class="AllProducts_Content_Llst_Title_Name">商品:</span>
                  <span class="AllProducts_Content_Llst_Title_Text">{{itme.title}}</span>
                </div>
                <div class="BuyNow">
                  <div class="BuyNow_price">
                    <span class="icon">￥</span>
                    <span class="price">{{itme.price}}</span>
                  </div>
                  <!-- large small mini	 -->
                  <van-button
                  @click="gomai(itme.id)"
                    class="BuyNow_Button"
                    size="small"
                    color="linear-gradient(to right, #4bb0ff, #6149f6)"
                  >立即购买</van-button>
                </div>
              </li>
            </ul>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      value: "",
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ],

      ActiveArea: [
        {
          img: require("../assets/images/activityImages/h-2.png"),
          text: "权益"
        },
        {
          img: require("../assets/images/activityImages/h-3.png"),
          text: "优惠"
        },
        {
          img: require("../assets/images/activityImages/h-4.png"),
          text: "秒杀"
        },
        {
          img: require("../assets/images/activityImages/h-5.png"),
          text: "次卡"
        },
        {
          img: require("../assets/images/activityImages/h-6.png"),
          text: "优惠劵"
        }
      ],
      AllData: [],
      swipe: []
    };
  },

  components: {},
  beforeCreate: function() {
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  },

  created: function() {
    this.$store.state.Title = "主页";
    this.$store.state.return = "";
    this.$store.state.LeftArrow = false;
      this.$store.state.MenuShow = true
    this.onLoad();
    this.FirstTime();
    
    // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。
  },
  beforeMount: function() {},
  methods: {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onSearch(val) {
      this.Toast(val);
    },
    onCancel() {
      this.Toast("取消");
    },
    FirstTime() {
      const THIS = this;
      THIS.axios
        .get(THIS.pathuiL + "startData")
        .then(function(response) {
          THIS.swipe = response.data.swipe;
        })
        .catch(function(err) {
          console.log(err);
        });
      THIS.axios
        .get(THIS.pathuiL + "allproductList")
        .then(function(response) {
          THIS.AllData = response.data;
          console.log(THIS.AllData[0]);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    gomai(index){
     console.log(index )
      
       this.$router.push({ path: '/Details' + index});
 
     
    }
  }
};
</script>

<style lang="scss"  scope>
.Home {
  flex: 1;
  overflow-x: hidden;
  background-color: cornsilk;
  display: flex;
  flex-direction: column;
}
.Home-List-Box {
  flex: 1;
}
.Home-List {
  width: 100%;
  height: 100%;
}
.van-swipe {
  width: 100%;
  height: 5rem;
}
.van-swipe img {
  width: 100%;
  height: 100%;
}
.ActiveAreaTitle {
  width: 100%;
  padding-top: 0.4rem;
}
.AllProducts_Box {
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.AllProducts_Title {
  width: 95%;
  height: 1rem;
  line-height: 1rem;
  background-color: white;
  letter-spacing: 3px;
  font-size: 0.4rem;
  font-family: "Courier New", Courier, monospace;
  font-weight: 600;
  border-radius: 0.3rem;
  margin-top: 0.2rem;
}
.AllProducts_Content {
  width: 95%;
  height: 100%;
  background-color: coral;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.AllProducts_Content_Llst {
  width: 40%;
  height: 6rem;
  background-color: whitesmoke;
  margin: 0.2rem 0;
  border-radius: 0.5rem;
}
.AllProducts_Content_Llst_Title {
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
  text-align: start;
}
.AllProducts_Content_Llst_Title_Name {
  color: black;
  padding-left: 0.2rem;
  letter-spacing: 2px;
  font: 0.3rem "Courier New", Courier, monospace;
}
.AllProducts_Content_Llst_Title_Text {
  font: 0.4rem "Courier New", Courier, monospace;
  color: red;
}
.BuyNow {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.BuyNow_Button {
}
.van-button__text {
  font-size: 0.3rem;
}
.AllProductsImg {
  margin-top: 0.3rem;
  border-radius: 0.2rem;
  overflow: hidden;
}
.icon {
  font-size: 0.6rem;
  color: #f40;
  font-family: 'Courier New', Courier, monospace;
}
.price {
  color: red;
  letter-spacing: 1px;
  font-family: 'Courier New', Courier, monospace;
}
</style>